<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>图片管理界面</title>
    <link href = "../css/manage.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>



<!--    顶部导航栏-->
<nav id="topBar" class="navbar navbar-default navbar-fixed-top" >
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="../manage/main.html">管理界面</a>
        </div>

        <ul class="nav navbar-nav navbar-right">
            <li><a href="../index.html">海报界面</a></li>
        </ul>
    </div>
    </div>
</nav>

<!--    主界面-->
<div id="main" class="row">

    <!--  主界面,左导航栏-->
    <div id="leftBar" class="col-md-2 col-xs-2 bg-success ">
        <ul class="nav nav-pills nav-stacked ">
            <li role="presentation" > <a href="../manage/main.html"><span class="glyphicon glyphicon-th-large glyphicon-size3" aria-hidden="true"> </span> &nbsp;&nbsp;主标题管理</a></li>
            <li role="presentation"><a href="../manage/second.html"><span class="glyphicon glyphicon-th glyphicon-size3" aria-hidden="true"> </span> &nbsp;&nbsp;副标题管理</a></li>
            <li role="presentation"><a href="../manage/desinfo.html"><span class="glyphicon glyphicon-th-list glyphicon-size3" aria-hidden="true "> </span> &nbsp;&nbsp;描述信息管理</a></li>
            <li role="presentation" class="active"> <a href="../manage/picture.html"><span class="glyphicon glyphicon-th-large glyphicon-size3" aria-hidden="true"> </span> &nbsp;&nbsp;图片信息管理</a></li>
        </ul>
    </div>




    <!--    主界面 右导航栏-->
    <div id="mainRightBar" class="col-md-10 col-xs-10 ">

        <!--增加数据 样式-->
        <div id="addData">
            <p class="glyphicon-size1">图片管理</p>
        </div>

        <div id="rightBar">

            <!--查看卡片表-->
            <!--    具体管理内容 : 默认为 对主标题信息进行管理 -->
            <div id="manageInfo">

                <!--        修改信息输入框-->
        <div class="row">
            <form action="../manage/addpicture" method="post" enctype="multipart/form-data">
            <div class="col-lg-6">
                    <div class="input-group">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">所属mid号</button>
                  </span>
                        <input type="text" class="form-control" placeholder="请输入" v-model="updateInfo" name="mid">
                    </div>
                </div>
            <div class="col-lg-3" >
                    <div class="form-group">
                        <input type="file" id="exampleInputFile" name="file">
                        <p class="help-block">选择需要上传的图片</p>
                    </div>
            </div>
            <div class="col-lg-3">
                <button type="submit" class="btn btn-default">增加</button>
            </div>
                </form>
        </div>




                <!--主标题表-->
                <table  border='1' cellspacing='0' class="table table-striped table-hover table-bordered ">
                    <thead class="bg-primary">
                    <tr>
                        <th>图片pid号</th>
                        <th>图片名</th>
                        <th>所属主题号mid</th>
                        <th colspan="2">操作</th>
                    </tr>
                    </thead>
                    <tbody id="cardPaging">
                    <tr v-if="pictures == null">
                        <td colspan="4"><span>很抱歉,当前条件下暂无数据</span></td>
                    </tr>
                    <tr v-for="picture in pictures" v-if="pictures != null">

                        <td>{{picture.pid}}</td>
                        <td >{{picture.picName}}</td>
                        <td>{{picture.mid}}</td>
                        <td>
                            <a data-toggle="modal" data-target="#updateCardModal"
                               v-if="updateInfo != ''" v-on:click="updatePicture(picture.pid,updateInfo)">
                                修改
                            </a>
                        </td>
                        <td><a data-toggle="modal" data-target="#deleteModal"
                               v-on:click="deletePicture(picture.pid)">
                            删除
                        </a>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </div>

            <!--            分页,为vue做准备-->
            <div id="setPage" class="row">
                <div class="col-md-3 col-xs-3 ">
                    <!--占位-->
                </div>
                <nav aria-label="Page navigation" class="col-md-9 col-xs-9 ">
                    <ul class="pagination pagination-lg">
                        <li v-on:click="setPicturePage(page2-1)" v-if="page2>=2">
                            <a aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li v-for="n in 2" v-on:click="setPicturePage(page2- (3-n))" v-if="(page2- (3-n))>=1 && (page2- (3-n))<=page2"><a >{{page2- (3-n)}}</a></li>
                        <li v-for="n in 3" v-on:click="setPicturePage(page2+ n-1)" v-if="(page2+ n-1)>=1 && (page2+ n-1)<=totalPage2" v-bind:class="{'active':(page2==page2+n-1)}"><a >{{page2+ n-1}}</a></li>
                        <li v-on:click="setPicturePage(page2+1)" v-if="page2<=totalPage2-1">
                            <a aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>




        </div>
    </div>

</div>


<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="../js/picture.js" ></script>

</body>
</html>